<template>
	<view class="movie-scroll-container">
		<view class="header">
			<text>{{tag}}</text>
			<text @tap="toMovieList">查看更多</text>
		</view>
		<scroll-view class="movies-scroll" scroll-x="true" enable-flex >
			<view 
			class="movie-item" 
			v-for="item in scrollData" 
			:key="item.id"
			@tap="toMovieDetail"
			:id="item.id"
			>
				<image :src="item.cover" mode=""></image>
				<text>{{item.title}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		name:"movie-scroll",
		props:{
			tag:String,
		},
		
		data() {
			return {
				scrollData:[]
			};
		},
		created() {
			this.getMoviesDataBy();
		},
		
		methods:{
			toMovieList(e){	
		
				uni.navigateTo({
					url:'../../pages/movie-list/movie-list?tag=' + this.tag
				})
			},
			
			toMovieDetail(e){
				uni.navigateTo({
					url: '../../pages/movie-detail/movie-detail?id=' + e.currentTarget.id
				})
			},
			
			async getMoviesDataBy() {
				let moviesData = await request('/movies/getMovies',{tag:this.tag,pageSize:'10'});
				
				this.scrollData = moviesData.result.rows;
				// console.log(typeof this.moviesDataByTag[0]);
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>

.movie-scroll-container{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 40rpx;
		box-sizing: border-box;
		.header{
			width: 100%;
			height: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: bold;
			margin-bottom: 20rpx;
			color: $uni-color-primary;
		}
		
		.movies-scroll{
			height: 280rpx;
			display: flex;
			.movie-item{
				display: flex;
				flex-direction: column;
				align-items: center;
			    width: 165rpx;
				height: 280rpx;
			    margin: 0 20rpx;
				image{
				    width: 165rpx;
				    height: 225rpx;
				    border-radius: 10rpx;
				}
				text{
					width: 165rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 26rpx;
					/* 单行文本溢出隐藏 省略号代替 */
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					
					  // 多行文本溢出隐藏 省略号代替*/
					  // overflow: hidden;
					  // text-overflow: ellipsis;
					  // display: -webkit-box;
					  // -webkit-box-orient: vertical; /*设置对其模式*/
					  // -webkit-line-clamp: 2; /*设置多行的行数
				}
				&:first-of-type{
					margin-left: 0;
				}
				&:last-of-type{
					margin-right: 0;
				}
			}
		}
	}








 

</style>
